<template>
  <div class="contact_block">
    <div class="corner top_right"></div>
    <div class="corner top_left"></div>
    <div class="corner bottom_right"></div>
    <div class="corner bottom_left"></div>
    
    <div class="contact_block_main_wrapper">
      <!-- 初始状态显示logo -->
      <div class="logo_img">
        <img src="@/assets/images/no_text_logo.svg" alt="logo" class="svg">
      </div>
      
      <!-- hover时显示的照片区域 -->
      <div class="contact_block_photo">
        <img src="@/assets/images/no_text_logo.svg" alt="logo" class="svg cb_back">
        <img v-if="photo" :src="photo" :alt="name" class="contact_block_persone">
      </div>
      
      <!-- 联系信息 -->
      <div class="contact_block_txt_info">
        <div class="contact_block_content">
          <div class="contact_block__head">
            <div class="contact_block__title">{{ name }}</div>
            <div class="contact_block__text">{{ position }}</div>
          </div>
          
          <ul class="ico_links">
            <li v-if="phone">
              <a class="ico_link" :href="`tel:${phone}`">
                <span class="ico_link_img">
                  <img src="@/assets/images/icons/phone.svg" alt="phone" class="svg">
                </span>
                <span class="ico_link_text"><strong>{{ phone }}</strong></span>
              </a>
            </li>
            <li v-if="email">
              <a class="ico_link" :href="`mailto:${email}`">
                <span class="ico_link_img">
                  <img src="@/assets/images/icons/mail.svg" alt="email" class="svg">
                </span>
                <span class="ico_link_text"><strong>{{ email }}</strong></span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  name: string;
  position: string;
  phone?: string;
  email?: string;
  photo?: string;
}>();
</script>

<style scoped>
/* 使用原网站的样式 */
.contact_block {
  width: 33.333%; /* 3列布局 */
  display: flex;
  align-items: center;
  position: relative;
  height: 30rem;
  color: #828c9f;
  font-size: 1.4rem;
  z-index: 1;
  background-color: transparent; /* 默认透明，显示logo */
}

.contact_block:hover {
  z-index: 2;
}

/* hover时隐藏logo */
.contact_block:hover .logo_img {
  opacity: 0;
  pointer-events: none;
}

.contact_block:hover .contact_block_photo {
  background-color: #232b39;
  box-shadow: 0 4rem 8rem rgba(17, 23, 36, 0.6);
  width: 250%; /* 增加展开宽度 */
  opacity: 1;
  padding-right: 2.5rem;
}

/* 第3n个卡片（每行最后一个）hover时向左扩展 */
.contact_block:nth-child(3n) .contact_block_photo {
  left: auto;
  right: 0;
  justify-content: flex-start;
}

.contact_block:nth-child(3n) .cb_back {
  right: auto;
  left: 3.5rem;
}

.contact_block:nth-child(3n):hover .contact_block_photo {
  padding-right: 0;
  padding-left: 2.5rem;
}

/* 四个角的装饰边框 */
.corner {
  position: absolute;
  width: 3rem;
  height: 3rem;
  transition: all 0.3s ease-in-out;
}

.corner.top_right {
  top: 0;
  right: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.corner.top_left {
  top: 0;
  left: -1px;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.corner.bottom_right {
  bottom: -1px;
  right: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.corner.bottom_left {
  left: -1px;
  bottom: -1px;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* 初始状态的logo显示 */
.logo_img {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease-in-out;
}

.logo_img img {
  width: 15rem;
  max-height: 11.8rem;
  opacity: 0.3; /* logo半透明显示 */
}

/* 主容器 */
.contact_block_main_wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease-in-out;
}

/* hover时显示的照片区域 */
.contact_block_photo {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: 0.5s;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  opacity: 0;
  /* 移除黄色边框 */
}

.contact_block_photo .contact_block_persone {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  position: relative;
  z-index: 1; /* 人物在背景logo上方 */
  object-fit: contain;
  border-radius: 0%;
  border: none;
}

/* 背景logo */
.cb_back {
  width: 28rem; /* 增大背景logo */
  height: 23.5rem; /* 增大背景logo */
  max-height: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  z-index: 0; /* 背景logo在人物下方 */
  opacity: 0.5; /* 增加不透明度 */
  filter: brightness(0.25); /* 使logo接近黑色 */
  border: none; /* 移除边框 */
}

/* 文字信息区域 */
.contact_block_txt_info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 2rem 4rem;
  pointer-events: none; /* 默认不接收鼠标事件，让logo可以显示 */
  z-index: 2; /* 文字信息在最上层 */
}

.contact_block:hover .contact_block_txt_info {
  pointer-events: auto; /* hover时恢复鼠标事件 */
}

.contact_block_content {
  width: 100%;
}

.contact_block__head:not(:last-child) {
  margin-bottom: 3rem;
}

.contact_block__head > :not(:last-child) {
  margin-bottom: 1.5rem;
}

.contact_block__title {
  color: #fff;
  font-family: ProximaNova sb, sans-serif;
  font-size: 2rem;
}

.contact_block__text {
  color: #828c9f;
  font-size: 1.4rem;
}

/* 联系方式列表 */
.ico_links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ico_links > :not(:last-child) {
  margin-bottom: 2rem;
}

.contact_block .ico_links > :not(:last-child) {
  margin-bottom: 1.5rem;
}

.ico_link {
  display: flex;
  align-items: flex-start;
  color: #828c9f;
  font-size: 1.6rem;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

.contact_block .ico_link {
  font-size: 1.6rem;
}

.ico_link:hover {
  color: #e58707;
}

.ico_link strong {
  color: #fff;
  font-family: ProximaNova sb, sans-serif;
}

.ico_link_img {
  width: 3rem;
  flex-shrink: 0;
  height: 2.6rem;
  display: flex;
  align-items: center;
}

.contact_block .ico_link_img {
  width: 2.6rem;
  height: 2.3rem;
}

.ico_link_img img {
  max-width: 1.3rem;
  max-height: 1.3rem;
  /* SVG图标颜色为黄色 */
  filter: brightness(0) saturate(100%) invert(53%) sepia(94%) saturate(1461%) hue-rotate(4deg) brightness(96%) contrast(93%);
}

.ico_link_text {
  flex: 1;
}

/* 响应式设计 */
@media screen and (max-width: 1499px) {
  .contact_block__head > :not(:last-child) {
    margin-bottom: 1rem;
  }
  
  .contact_block__title {
    font-size: 1.7rem;
  }
  
  .contact_block__head:not(:last-child) {
    margin-bottom: 1.5rem;
  }
  
  .contact_block .ico_links > :not(:last-child) {
    margin-bottom: 1rem;
  }
  
  .contact_block_txt_info {
    padding: 1rem 2rem;
  }
  
  .contact_block {
    height: 22rem;
  }
  
  .cb_back {
    width: 18.1rem;
    height: 14.3rem;
    right: 1rem;
  }
  
  .contact_block:nth-child(3n) .cb_back {
    left: 3.5rem;
  }
  
  .contact_block .ico_link {
    font-size: 1.4rem;
  }
  
  .contact_block .ico_link_img {
    height: 2rem;
  }
}

@media screen and (max-width: 1199px) {
  .ico_link_img {
    height: 2rem;
  }
}

@media screen and (max-width: 600px) {
  .contact_block {
    width: 50%;
  }
  
  /* 手机端第2n个卡片向左扩展 */
  .contact_block:nth-child(2n) .contact_block_photo {
    left: auto;
    right: 0;
    justify-content: flex-start;
  }
  
  .contact_block:nth-child(2n) .cb_back {
    right: auto;
    left: 3.5rem;
  }
  
  .contact_block:nth-child(2n):hover .contact_block_photo {
    padding-right: 0;
    padding-left: 2.5rem;
  }
  
  /* 手机端第3n个卡片恢复默认样式 */
  .contact_block:nth-child(3n) .contact_block_photo {
    right: auto;
    left: 0;
    padding-left: 0;
    padding-right: 2.5rem;
    justify-content: flex-end;
  }
  
  .contact_block:nth-child(3n) .cb_back {
    left: auto;
    right: 0;
  }
}

@media screen and (max-width: 420px) {
  .contact_block {
    width: 100%;
  }
  
  .contact_block:hover .contact_block_photo {
    width: 100%; /* 小屏幕上不展开，保持100% */
  }
  
  .cb_back,
  .contact_block_photo .contact_block_persone {
    display: none;
  }
  
  .ico_link_img {
    height: 16px;
  }
}
</style>

